import React, { useState, useEffect } from "react";
import { connect } from 'umi';
import { Row, Col, Space, Button, Card, Tooltip, DatePicker } from 'antd';
import { Line } from '@ant-design/charts';
import { InfoCircleOutlined, } from '@ant-design/icons'
const { RangePicker } = DatePicker;
const Analysis = (props) => {
  const { dispatch } = props
  const [list, setList] = useState([]);

  useEffect(() => {
    asyncFetch();
  }, []);

  const asyncFetch = () => {
    fetch('https://gw.alipayobjects.com/os/bmw-prod/e00d52f4-2fa6-47ee-a0d7-105dd95bde20.json')
      .then((response) => response.json())
      .then((json) => setList(json))
      .catch((error) => {
        console.log('fetch data failed', error);
      });
  };
  const config = {
    data: list,
    xField: 'year',
    yField: 'gdp',
    seriesField: 'name',
    yAxis: {
      label: {
        formatter: (v) => `${(v / 10e8).toFixed(1)} B`,
      },
    },
    legend: {
      position: 'top',
    },
    smooth: true,
    // @TODO 后续会换一种动画方式
    animation: {
      appear: {
        animation: 'path-in',
        duration: 5000,
      },
    },
  };



  const cardPropsStyle = {
    height: 160
  }

  return (
    <>
      <Col span={24}>
        <Space direction="vertical" style={{ width: '100%' }}>
          <div className="Analysis_searchTopBox">
            <div className="Analysis_title_box">
              付费直播销售情况
            </div>
            <Space className="Analysis_searchRight">
              <div> 时间筛选 </div>
              <RangePicker />
              <Button>导出</Button>
            </Space>
          </div>

          <div className="Analysis_less_wrapper">
            <Row gutter={[18, 18]}>
              <Col span={24}>访问浏览</Col>
              <Col span={6}>
                <Card
                  style={cardPropsStyle}
                  title={
                    <div>
                      售前访客数
                      <Tooltip placement="top" title={'指标定义：访问付费直播/付费会员购买页的用户数,去重规则:一个用户访问多次记为1人'}>
                        <InfoCircleOutlined style={{ marginLeft: 8 }}></InfoCircleOutlined>
                      </Tooltip>
                    </div>}
                  bordered={false}
                >
                  <div className="Analysis_less_name">0</div>
                </Card>
              </Col>
              <Col span={6}>
                <Card
                  style={cardPropsStyle}
                  title={
                    <div>
                      售前访问量
                      <Tooltip placement="top" title={'指标定义：付费直播/会员直播购买页被访问的次数,去重规则：一个用户访问多次记为多次'}>
                        <InfoCircleOutlined style={{ marginLeft: 8 }}></InfoCircleOutlined>
                      </Tooltip>
                    </div>}
                  bordered={false}
                >
                  <div className="Analysis_less_name">0</div>
                </Card>
              </Col>
            </Row>

          </div>
          <div className="Analysis_less_wrapper">
            <Row gutter={[18, 18]}>
              <Col span={24}>成交转化</Col>
              <Col span={6}>
                <Card
                  style={cardPropsStyle}
                  title={
                    <div>
                      支付人数
                      <Tooltip placement="top" title={'指标定义：已成功支付订单的用户数'}>
                        <InfoCircleOutlined style={{ marginLeft: 8 }}></InfoCircleOutlined>
                      </Tooltip>
                    </div>}
                  bordered={false}
                >
                  <div className="Analysis_less_name">0</div>
                </Card>
              </Col>
              <Col span={6}>
                <Card
                  style={cardPropsStyle}
                  title={
                    <div>
                      支付金额（元）
                      <Tooltip placement="top" title={'指标定义：已支付成功订单的实收金额之和'}>
                        <InfoCircleOutlined style={{ marginLeft: 8 }}></InfoCircleOutlined>
                      </Tooltip>
                    </div>}
                  bordered={false}
                >
                  <div className="Analysis_less_name">0.00</div>
                </Card>
              </Col>
              <Col span={6}>
                <Card
                  style={cardPropsStyle}
                  title={
                    <div>
                      访问-支付转化率
                      <Tooltip placement="top" title={'指标定义：支付人数/售前访客数'}>
                        <InfoCircleOutlined style={{ marginLeft: 8 }}></InfoCircleOutlined>
                      </Tooltip>
                    </div>}
                  bordered={false}
                >
                  <div className="Analysis_less_name">0.00%</div>
                </Card>
              </Col>
            </Row>

          </div>
        </Space>
      </Col >
      <Col span={24}>
        <Space direction="vertical" style={{ width: '100%' }}>
          <div className="Analysis_title_box">
            访问-成交数据趋势图 <span className="Analysis_title_time">统计时间：2023-06-15</span>
          </div>
          <div>
            <Line {...config} />;
          </div>
        </Space>
      </Col>
    </>
  )
}
export default connect(({ loading }) => ({
  loading: loading.effects['commodity/fakeDeleteOfflineGoods']
}))(Analysis);;
